<template>
	<div id="joinAgent">
		<header>
	  		<div class="header_1">
	  			<div class="header_1_l">
	  				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self" class="qq">
	  					<img src="../../static/img/header-01.png"/>
	  					<p>在线客服</p>
	  				</a>
	  				<span></span>
	  				<div @click="collection('赶紧试','http://192.168.0.126:3000/home/index')" class="collection">
	  					<img src="../../static/img/header-02.png"/>
	  					<p>收藏</p>
	  				</div>
	  			</div>
	  			<div class="header_1_r">
	  				<ul v-if="!token">
	  					<li><router-link to="/IDoperation/login">商家登录</router-link></li>
	  					<li class="feature"><router-link to="/IDoperation/register">免费注册</router-link></li>
	  				</ul>
	  				<p id="logout" v-else><router-link to="/agent/agentCenter">{{user}}</router-link> <span @click="logout" class="logout">退出</span></p>
	  				<span class="color_fg"></span>
	  				<router-link v-wechat-title='$route.meta.title' to="/home/index">赶紧试首页</router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/a">分享赚钱<span>月入4000</span></router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/help">帮助中心</router-link>
	  			</div>
	  		</div>
	  		<div class="header_2">
	  			<div class="header_2_box">
	  				<div class="header_2_left">
	  					<img src="../../static/img/logo-02.png"/>
	  					<div class="header_2_text">
	  						<h3>业务招商</h3>
	  						<p>电商爆款平台引领者</p>
	  					</div>
	  				</div>
	  				<div class="header_right">
	  					<ul>
	  						<li @click="scrollTop(0)" :class="top>=0&&top<452?'nav_active':''">首页</li>
	  						<li @click="scrollTop(452)" :class="top>=452&&top<1020?'nav_active':''">产品服务</li>
	  						<li @click="scrollTop(1020)" :class="top>=1020&&top<1395?'nav_active':''">运营问题</li>
	  						<li @click="scrollTop(1395)" :class="top>=1395&&top<1950?'nav_active':''">平台对比</li>
	  						<li @click="scrollTop(1950)" :class="top>=1950&&top<2360?'nav_active':''">流程说明</li>
	  						<li @click="scrollTop(2360)" :class="top>=2360?'nav_active':''">常见问题</li>
	  					</ul>
	  				</div>
	  			</div>
	  		</div>
	    </header>
	    <div id="banner">
	    	<!--<img src="../../static/img/joinAgent-banner.jpg"/>-->
	    	<div class="banner_btns">
	    		<router-link to="/IDoperation/register">注册商家账号</router-link>
	    		<a href="tencent://message/?uin=800856669&Site=&Menu=yes">马上咨询</a>
	    	</div>
	    </div>
	    <div id="problem">
	    	<div class="joinAgent_title">
	    		<p>运营店铺时你是否会经常遇到这样的问题？</p>
	    		<span></span>
	    	</div>
	    	<div class="problem_list">
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-01.png"/>
	    			<p>宝贝只有销量没有排名</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-02.png"/>
	    			<p>人群标签混乱</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-03.png"/>
	    			<p>宝贝没流量，没排名</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-04.png"/>
	    			<p>不了解淘宝最新搜索规则</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-05.png"/>
	    			<p>新品迟迟成不了爆款</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-06.png"/>
	    			<p>手淘搜索时排名很靠后</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-07.png"/>
	    			<p>收藏，加购不足</p>
	    		</div>
	    		<div class="problem_item">
	    			<img src="../../static/img/joinAgent-08.png"/>
	    			<p>店铺有流量，没转化</p>
	    		</div>
	    	</div>
	    	<router-link to="/IDoperation/register">赶紧试为您解决以上问题</router-link>
	    </div>
	    <div id="what">
	    	<div class="joinAgent_title">
	    		<p>赶紧试能为商家带来什么？</p>
	    		<span></span>
	    	</div>
	    	<div class="what_list">
	    		<div class="what_item">
	    			<img src="../../static/img/joinAgent-09.png"/>
	    			<p>打造精确人群标签</p>
	    		</div>
	    		<div class="what_item">
	    			<img src="../../static/img/joinAgent-10.png"/>
	    			<p>提升关键词排名</p>
	    		</div>
	    		<div class="what_item">
	    			<img src="../../static/img/joinAgent-11.png"/>
	    			<p>安全不降权</p>
	    		</div>
	    		<div class="what_item">
	    			<img src="../../static/img/joinAgent-12.png"/>
	    			<p>丰富的用户资源</p>
	    		</div>
	    		<div class="what_item">
	    			<img src="../../static/img/joinAgent-13.png"/>
	    			<p>专业的运营指导</p>
	    		</div>
	    	</div>
	    </div>
	    <div id="contrast">
	    	<div class="joinAgent_title">
	    		<p>赶紧试与其他平台对比</p>
	    		<span></span>
	    	</div>
	    	<div class="contrast">
	    		<div class="contrast_1">
	    			<p>注册为用户后通过严格审核机制，确保为淘宝日常购物买家<span>来源</span></p>
	    			<p>赶紧试有10,000+活跃用户<span>数量</span></p>
	    			<p>匹配淘宝最新规则，多天下单合理优化店铺数据<span>模式</span></p>
	    			<p>多年淘宝/天猫/京东实操经验运营对店铺进行指导<span>运营</span></p>
	    			<p>匹配千人千面规则，后来带来的流量都是购买潜在目标人群<span>产品</span></p>
	    		</div>
	    		<div class="contrast_2">
	    			<p>来自各种渠道，审核用户机制不严格，风险系数高</p>
	    			<p>活跃用户有限</p>
	    			<p>只看宝贝下单数字，其他精准标签、收藏、加购、关键词权重等一概不管</p>
	    			<p>没有实操经验，凭某些电商网站里的文章作为培训教程来指导商家</p>
	    			<p>只关注每天下几个单，计算转化率，其他影响店铺权重的统统忽略</p>
	    		</div>
	    	</div>
	    </div>
	    <div id="process">
	    	<div class="joinAgent_title">
	    		<p>流程说明</p>
	    		<span></span>
	    	</div>
	    	<img src="../../static/img/joinAgent-14.png"/>
	    	<img src="../../static/img/joinAgent-15.png"/>
	    </div>
	    <div id="question">
	    	<div class="joinAgent_title">
	    		<p>常见问题</p>
	    		<span></span>
	    	</div>
	    	<div class="question_item">
	    		<p class="ask">1.你们的用户来源是哪里？</p>
	    		<p class="answer">我们的用户都是在淘宝、天猫、京东等日常购物的买家。赶紧试网通过外部广告渠道以及用户口碑传播，以商品吸引用户。目前累计约300,000/天的在线活跃真实买家。</p>
	    	</div>
	    	<div class="question_item">
	    		<p class="ask">2.如何帮助商家提高宝贝排名？</p>
	    		<p class="answer">用户通过试用流程，匹配淘宝所需的权重因素，从而提升关键词排名。同时，商家可对于成交多渠道多维度化搜索、二维码、淘口令、直通车、U站、淘外链接等方式。</p>
	    	</div>
	    	<div class="question_item">
	    		<p class="ask">3.如何加入你们？</p>
	    		<p class="answer">戳以下任意按钮</p>
	    	</div>
	    	<div class="question_btns">
	    		<router-link to="IDoperation/register">商家注册</router-link>
	    		<a href="tencent://message/?uin=800856669&Site=&Menu=yes">在线咨询</a>
	    	</div>
	    </div>
	</div>
</template>

<script>
export default{
	name: "joinAgent",
	data:function(){
		return{
			token: '',
			user: '',//商家昵称
			top: '',
		}
	},
	methods:{
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.user = data.nickName;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		logout: function(){
			localStorage.removeItem('token');
			this.$router.push('/IDoperation/login');
		},
		scrollTop: function(num){
			$(window).scrollTop(num);
		}
	},
	created:function(){
		$(window).scrollTop(0);
		var token = localStorage.getItem('token');
		if(token){
			this.token = token;
			this.info();
		}
		var _this = this;
		$(window).scroll(function(){
			_this.top = $(window).scrollTop();
		})
	},
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #F5F5F5;
	min-width: 1366px;
}
header .router-link-active{
	color: #ff464e;
}
.header_1{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #808080;
	font-size: 12px;
	padding: 5px 0;
}
.header_1_l{
	display: flex;
	align-items: center;
}
.header_1_l span{
	height: 10px;
	width: 1px;
	background-color: #9f9f9f;
	margin: 0 15px;
}
.qq,.collection{
	display: flex;
	align-items: center;
	cursor: pointer;
}
.qq img,.collection img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.header_1_r{
	display: flex;
	align-items: center;
}
.header_1_r .color_fg{
	height: 10px;
	width: 1px;
	background-color: #9F9F9F;
	margin: 0 10px;
}
.header_1_r ul{
	display: flex;
	align-items: center;
}
.header_1_r ul li{
	margin-left: 10px;
}

.header_1_r #logout{
	display: flex;
}
.header_1_r .logout{
	color: #FF464E;
	cursor: pointer;
	margin-left: 5px;
}
.header_1_r a{
	display: flex;
	align-items: center;
}
.header_1_r a span{
	color: #FF464E;
}
.header_1_r a img{
	height: 8px;
	display: block;
	margin-left: 3px;
}
.feature{
	color: #ff464e;
}
.header_2{
	background-color: #fff;
	padding: 15px 0;
	border-bottom: 1px solid #E6E6E6;
}
.header_2_box{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header_2_box .header_2_left{
	display: flex;
	align-items: center;
	color: #4F4F4F;
}
.header_2_box .header_2_left img{
	height: 40px;
	display: block;
}
.header_2_box .header_2_left .header_2_text{
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid #E6E6E6;
}
.header_2_box .header_2_left h3{
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 5px;
}
.header_2_box .header_right{
	display: flex;
	align-items: center;
}
.header_2_box .header_right ul{
	display: flex;
	align-items: center;
}
.header_2_box .header_right ul li{
	display: flex;
	align-items: center;
	padding: 0 15px;
	color: #4F4F4F;
	font-size: 14px;
	cursor: pointer;
}
.header_2_box .header_right ul li.nav_active{
	color: #FF464E;
}
.header_2_box .header_right ul li img{
	height: 30px;
	display: block;
	margin-right: 5px;
}
#banner{
	width: 100%;
	margin-top: 72px;
	height: 450px;
	background: url('../../static/img/joinAgent-banner.jpg') no-repeat center;
	background-size: auto 100%;
	position: relative;
}
#banner img{
	width: 100%;
	display: block;
}
#banner .banner_btns{
	position: absolute;
	bottom: 16%;
	width: 100%;
	display: flex;
	justify-content: center;
}
#banner .banner_btns a{
	width: 150px;
	height: 35px;
	background-color: #FF464E;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 16px;
	border-radius: 3px;
	text-align: center;
	line-height: 35px;
}
#banner .banner_btns a:first-child{
	margin-right: 20px;
}
/*------------遇到的问题----------------*/
.joinAgent_title p{
	font-size: 24px;
	color: #4D4D4D;
	text-align: center;
}
.joinAgent_title span{
	width: 100px;
	height: 3px;
	background-color: #FFAA05;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
}
#problem{
	background-color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
}
.problem_list{
	display: flex;
	flex-wrap: wrap;
	width: 1000px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 40px;
}
.problem_item{
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
}
.problem_item img{
	height: 100px;
	display: block;
	margin-bottom: 15px;
}
.problem_item p{
	color: #4D4D4D;
	font-size: 16px;
}
#problem>a{
	width: 300px;
	height: 36px;
	background-color: #FF464E;
	display: block;
	margin: 0 auto;
	color: #FFFFFF;
	border-radius: 50px;
	text-align: center;
	line-height: 36px;
	font-size: 16px;
}
/*-------带来什么------------*/
#what{
	padding-top: 50px;
	padding-bottom: 50px;
}
.what_list{
	display: flex;
	justify-content: space-around;
	width: 1100px;
	margin: 0 auto;
	margin-top: 30px;
}
.what_item{
	width: 200px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	font-size: 16px;
	color: #4D4D4D;
	border-radius: 3px;
}
.what_item img{
	height: 80px;
	display: block;
	margin-bottom: 15px;
}
/*--------对比--------*/
#contrast{
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #E6E6E6;
}
.contrast{
	width: 1150px;
	margin: 0 auto;
	margin-top: 30px;
	display: flex;
	align-items: center;
    height: 380px;
    overflow: hidden;
}
.contrast_1{
	width: 50%;
	border-right: 2px dashed #FFAA05;
	padding-right: 40px;
	box-sizing: border-box;
}
.contrast_1 p{
	width: 100%;
	text-align: right;
	position: relative;
	height: 80px;
	line-height: 80px;
	color: #FF464E;
	font-weight: 600;
	font-size: 16px;
}
.contrast_1 p span{
	background-color: #FFAA05;
	color: #FFFFFF;
	font-weight: normal;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	display: block;
	border-radius: 50%;
	position: absolute;
	right: -70px;
	top: 10px;
}
.contrast_2{
	width: 50%;
	padding-left: 40px;
	box-sizing: border-box;
}
.contrast_2 p{
	width: 100%;
	height: 80px;
	line-height: 80px;
	color: #9A9A9A;
	font-size: 16px;
}
/*---------流程说明-----------*/
#process{
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #fff;
}
#process>img{
	width: 1050px;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
}
/*---------常见问题-------------*/
#question{
	padding-top: 50px;
	padding-bottom: 30px;
}
.question_item{
	width: 1100px;
	margin: 0 auto;
}
.question_item .ask{
	font-weight: 600;
	font-size: 16px;
	color: #4D4D4D;
	margin-top: 20px;
	margin-bottom: 10px;
}
.question_item .answer{
	font-size: 14px;
	color: #9A9A9A;
	padding-left: 12px;
	box-sizing: border-box;
}
.question_btns{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}
.question_btns a{
	width: 200px;
	height: 40px;
	border-radius: 50px;
	border: none;
	color: #FFFFFF;
	font-weight: 600;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
}
.question_btns a:first-child{
	background-color: #FF464E;
	box-shadow: 0 0 10px #FF464E;
	margin-right: 20px;
}
.question_btns a:last-child{
	background-color: #FFAA05;
	box-shadow: 0 0 10px #FFAA05;
}
</style>
